<style type="text/css">
    table {
        max-width: 750px;
    }

    .content-textbox {
        max-height: 20em;
        overflow: auto;
    }

    .content-title {
    }
</style>
<div id="kegiatan-dialog" title="Highlight Kegiatan" style="display: none;">
    <input type="hidden" class="id" />
    <h1 class="judul title content-title">Judul Kegiatan</h1>
    <p>
        <span class="keterangan"></span>
    </p>
    <p class="content-textbox">
        <br />
        <img class="pic" src="#" style="float: left; margin: 1em; height: 100px; width: 100px;"/>
        <span class="sum">
        </span>
    </p>
</div>
<div style="margin-top: 2em; margin-bottom: 2em; display: block;">
    <?php $this->view("kegiatan/hlkegiatan"); ?>
</div>
<div>
    <h1 class="title">Daftar Kegiatan</h1>

    <table id="listkegiatan" style="margin-top: 1em;">
        <thead>
            <tr>
                <th>Judul Kegiatan</th>
                <th>Lokasi</th>
                <th>Tanggal Kegiatan</th>
                <th>Penulis</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <?php
            if (count($kegiatanList) > 0) {
                foreach ($kegiatanList as $kegiatan) {
                    echo "<tr>";
                    echo "<td>" . $kegiatan->content_id->title . "</td>";
                    echo "<td>" . $kegiatan->location . "</td>";
                    echo "<td>" . $kegiatan->start_date . " s/d " . $kegiatan->end_date . "</td>";
                    echo "<td>" . $kegiatan->content_id->poster_id->display_name . "</td>";
                    echo "<td>" . "<a href='javascript:void(0);' onClick='javascript:showKegDialog(" . $kegiatan->id . ");'>Pilih</a>" . "</td>";
                    echo "</tr>";
                }
            } else {
                echo "<tr>";
                echo "<td style='text-align: center;' colspan='6'>" . "(tidak ada entry kegiatan menunggu approval)" . "</td>";
                echo "</tr>";
            }
            ?>
        </tbody>
    </table>
</div>
<script type="text/javascript">
            jQuery(document).ready(function() {
                $("#kegiatan-dialog").dialog({
                    modal: true,
                    autoOpen: false,
                    width: "53em",
                    resizeable: false,
                    buttons: {
                        "Batal": function() {
                            $(this).dialog("close");
                        },
                        "Pilih": function() {
                            if (confirm("Pilih kegiatan sebagai HIGLIGHT?")) {
                                $.ajax({
                                    type: "POST",
                                    url: "<?php echo site_url("kegiatan/saveHLKegiatan"); ?>",
                                    async: false,
                                    data: {
                                        kegiatan_id: $("#kegiatan-dialog .id").val()
                                    },
                                    beforeSend: function(xhr) {
                                    },
                                    success: function(result, status, xhr) {
                                        window.location = "<?php echo site_url("usercp/hlkegiatan"); ?>";
                                    },
                                    error: function(xhr, status, error) {
                                        window.location = "<?php echo site_url("usercp/hlkegiatan"); ?>";
                                    }
                                });
                            }
                        }
                    }
                });
            });

            function showKegDialog(kegId) {
                $.ajax({
                    url: "<?php echo site_url("service/getDataJSON/kegbyid"); ?>",
                    method: "POST",
                    dataType: "json",
                    data: {
                        id: kegId
                    },
                    success: function(kegiatan) {
                        $("#kegiatan-dialog .judul").text(kegiatan.content_id.title);
                        $("#kegiatan-dialog .pic").prop("src", kegiatan.content_id.thumbnail_img.src);
                        $("#kegiatan-dialog .content-textbox .sum").html(kegiatan.content_id.text);
                        $("#kegiatan-dialog .keterangan").html("Tanggal : " + kegiatan.start_date + " s/d " + kegiatan.end_date + "" + ", bertempat di " + kegiatan.location);
                        $("#kegiatan-dialog .id").val(kegiatan.id);
                    }
                });

                $("#kegiatan-dialog").dialog("open");
            }
</script>